<template>
  <div class="container">
    <div class="btnBox">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form">
          <a-form-item label="充值方式">
            <a-input v-decorator="[ 'channel' ]" placeholder="请输入充值方式" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
            <a-button type="primary" class="ml15" icon="plus" @click="insert">
              新增
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="onSeach"
      bordered
      :rowKey="(record) => record.id"
    >
      <template slot="state" slot-scope="text, record">
        <a-switch checked-children="开" un-checked-children="关" :default-checked="!!Number(text)"
                  @click="changeSwitch(record)" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="primary" @click="edit(record)">编辑</a-button>
        <a-button size="small" type="danger" @click="deleteFn(record)" class="ml15">删除</a-button>
      </template>
    </s-table>

    <!--新增删除-->
    <EditAdd :visible="visible" :record="this.record" :type="type" @cancel="cancel" @onOk="onOk" />
  </div>
</template>

<script>
import STable from '@/components/Table'
import { mapGetters, mapState } from 'vuex'
import { deleteRequest, getList, switchRequest } from '@/api/recharge-manage'
import store from '@/store'
import { Ellipsis } from '@/components'
import EditAdd from './editAdd.vue'
import { message } from 'ant-design-vue'
import { numFormat } from '@/utils/util'
import { sitePlace } from '@/views/mapping'

export default {
  name: 'rechargeConfig',
  components: { Ellipsis, STable, EditAdd },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      // 查询条件
      formData: {
        channel: '' // 充值方式
      },
      type: 1, // 1新增，0 编辑
      visible: false,
      record: {}, // 行数据
      // 查询条件参数
      pageNum: 0,
      pageSize: 10,
      total: 0,
      columns: [
        { title: '编码', dataIndex: 'id', align: 'center' },
        { title: '充值方式', dataIndex: 'channel', align: 'center' },
        {
          title: '最小金额', dataIndex: 'min', align: 'center', customRender: (text) => {
            return this.common.numFormat(text)
          }
        },
        {
          title: '最大金额', dataIndex: 'max', align: 'center', customRender: (text) => {
            return this.common.numFormat(text)
          }
        },
        { title: '是否启用', dataIndex: 'state', scopedSlots: { customRender: 'state' }, align: 'center' },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center', width: 180 }
      ]
    }
  },
  methods: {
    numFormat,
    // 条件查询列表
    onSeach(parameter) {
      const _this = this
      return new Promise((resolve, reject) => {
        getList({
          ...parameter,
          userId: store.getters.userInfo?.userId,
          ...this.form.getFieldsValue()
        }).then(res => {
          resolve(res.data)
        }).catch((err) => {
          console.log(err, 'err')
          // reject(err)
        })
      })
    },
    onOk(bo) {
      this.visible = false
      this.record = {}
      this.refresh(bo !== 'edit')
    },
    cancel() {
      this.visible = false
      this.record = {}
    },
    insert() {
      this.visible = true
      this.type = true
    },
    edit(item) {
      this.visible = true
      this.type = false
      this.record = item
    },
    refresh(boo) {
      this.$refs.table.refresh(boo)
    },
    changeSwitch(record) {
      const _this = this
      switchRequest({
        id: record.id,
        state: !!Number(record.state) ? 0 : 1,
        userId: store.getters.userInfo?.userId,
        uuid: record.uuid
      }).then(res => {
        if (res.code === 200) {
          _this.refresh(true)
          message.success('操作成功')
        }
      })
    },
    deleteFn(row) {
      const _this = this
      this.$confirm({
        content: '请确认是否删除？',
        onOk() {
          deleteRequest({
            id: row.id,
            userId: store.getters.userInfo?.userId,
            uuid: row.uuid
          }).then(res => {
            if (res.code === 200) {
              _this.refresh(true)
              message.success('操作成功')
            }
          })
        }
      })
    },
    onchange(data) {
      this.queryParam.review = data.key
    },
    search() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    },
    searchReset() {
      this.form.resetFields()
      this.$refs.table.refresh(true) // refresh() 不传参默认值 false 不刷新到分页第一页
    }
  }
}
</script>
<style lang="less" scoped>
.img {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 4px;
  cursor: pointer;

  &:hover {
    transform: scale(1.1);
    transition: all 1s;
  }
}
</style>
